<template>
  <div class="location">
    <div v-if="this.show === 1">
      <van-tree-select
        :items="items"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        @click-item="grtInfo"
        @click-nav="goLeft"
      />
    </div>
    <div v-if="show === 2">
      <div class="two-box">
        <div class="top">
          <p class="top-title">工作地点</p>
          <p class="icon-circle">
            <van-icon class="tt" name="location-o" size="0.6rem" />
          </p>
        </div>
        <div class="center">
          <div v-for="(item, index) in info" :key="index" @click="traffic(item.name)">
            <p :class="{ active: active1 == item.name }">
              <van-icon :name="item.icon" size="0.6rem" />
            </p>
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="bottom">
          <p>交通时间</p>
          <div class="bottom-box">
            <div
              :class="{ active: active2 == item }"
              v-for="(item, index) in time"
              :key="index"
              @click="trafficTime(item)"
            >
              <p class="icon-bottom">{{ item }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Location",
  data() {
    return {
      info: [
        {
          icon: "logistics",
          name: "公交",
        },
        {
          icon: "bulb-o",
          name: "驾车",
        },
        {
          icon: "friends-o",
          name: "步行",
        },
        {
          icon: "flower-o",
          name: "骑车",
        },
      ],
      time: ["15分钟", "30分钟", "60分钟", "90分钟"],
      items: [
        {
          text: "附近",
          children: [
            { text: "西城", id: 1 },
            { text: "朝阳", id: 2 },
            { text: "海淀", id: 3 },
            { text: "丰台", id: 4 },
            { text: "石景山", id: 5 },
          ],
        },
        {
          text: "商圈",
          children: [
            { text: "不限", id: 1 },
            { text: "东城", id: 2 },
            { text: "西城", id: 3 },
            { text: "朝阳", id: 4 },
            { text: "海淀", id: 5 },
            { text: "丰台", id: 6 },
            { text: "石景山", id: 7 },
          ],
        },
        {
          text: "地铁",
          children: [
            { text: "军事博物馆", id: 1 },
            { text: "南礼士路", id: 2 },
            { text: "复兴门", id: 3 },
            { text: "西单", id: 4 },
            { text: "天安门西", id: 5 },
            { text: "天安门东", id: 6 },
            { text: "王府井", id: 7 },
          ],
        },
        {
          text: "公司附近",
        },
      ],
      activeId: 1,
      activeIndex: 0,
      show: 1,
      tool: "",
      times: "",
      active1: "",
      active2: "",
    };
  },
  methods: {
    grtInfo(data) {
      // this.siteInfo = data.text;
      this.$emit("siteInfo", data.text);
      this.$toast("您当前选择的地方为 ：" + data.text);
    },
    goLeft(index) {
      if (index === 3) {
        this.show = 2;
      }
    },
    traffic(item) {
      this.active1 = item;
      this.tool = item;
      this.$emit("two", item);
    },
    trafficTime(item) {
      this.active2 = item;
      this.times = item;
      this.$emit("three", item);
    },
  },
};
</script>

<style lang="less">
.active {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #ff5555;
  border-radius: 50%;
  margin: 0.25rem 0;
}
.icon-bottom {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  // background-color: #ccc;
  border-radius: 50%;
  margin: 0.25rem 0;
}
.icon-circle {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0.25rem 0;
}
.two-box {
  width: 80%;
  margin: 0 auto;
  .top {
    margin-top: 0.5rem;
    .top-title {
      margin-bottom: 0.25rem;
    }
    .icon-circle {
      margin: 0 auto;
    }
  }
  .center {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
  .bottom {
    margin-top: 0.5rem;
    .bottom-box {
      display: flex;
      justify-content: space-between;
      // div {
      //   width: 1rem;
      //   height: 1rem;
      //   line-height: 1rem;
      //   background-color: #ccc;
      //   border-radius: 50%;
      // }
    }
  }
}
</style>
